<template>
  <div class="userFolloweds_container" v-loading="loading">
    <div v-if="$route.query.status == 0">
      <div class="userFolloweds_container_name">
        {{ $route.query.name }}的关注
      </div>
      <div class="userFolloweds_container_contact">
        <div
          class="userFolloweds_container_contact_inside"
          v-for="item in userFollowsList"
          :key="item.userId"
          @click="jump(item.userId)"
        >
          <div class="userFolloweds_container_contact_inside_img">
            <el-image lazy :src="item.avatarUrl" />
          </div>
          <div class="userFolloweds_container_contact_inside_right">
            <div class="mingzi">
              {{ item.nickname }}
            </div>
            <div class="mingzi_bottom">
              <div class="mingzi_bottom_signature">
                {{ item.signature }}
              </div>
              <div class="mingzi_bottom_flex">
                <div>歌单:{{ item.playlistCount }}</div>
                <div>粉丝:{{ item.followeds }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="userFolloweds_container_name">
        {{ $route.query.name }}的粉丝
      </div>
      <div class="userFolloweds_container_contact">
        <div
          class="userFolloweds_container_contact_inside"
          v-for="item in userFollowedsList"
          :key="item.userId"
          @click="jump(item.userId)"
        >
          <div class="userFolloweds_container_contact_inside_img">
            <el-image lazy :src="item.avatarUrl" />
          </div>
          <div class="userFolloweds_container_contact_inside_right">
            <div class="mingzi">
              {{ item.nickname }}
            </div>
            <div class="mingzi_bottom">
              <div class="mingzi_bottom_signature">
                {{ item.signature }}
              </div>
              <div class="mingzi_bottom_flex">
                <div>歌单:{{ item.playlistCount }}</div>
                <div>粉丝:{{ item.followeds }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userFollows, userFolloweds } from "../../../api/index";
export default {
  created() {
    this.loading = true
    if (this.$route.query.status == 0) {
      userFollows({ uid: this.$route.query.id }).then((res) => {
        this.userFollowsList = res.follow;
        this.loading = false
      });
    } else {
      userFolloweds({ uid: this.$route.query.id }).then((res) => {
        this.userFollowedsList = res.followeds;
        this.loading = false
      });
    }
  },
  data() {
    return {
      loading:false,
      userFollowsList: [],
      userFollowedsList: [],
    };
  },
  methods: {
    jump(id) {
      this.$router.push({
        path: "/yongHu",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.userFolloweds_container {
  width: 95%;
  .userFolloweds_container_name {
    margin-top: 30px;
    font-size: 25px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  .userFolloweds_container_contact {
    display: flex;
    flex-wrap: wrap;
    .userFolloweds_container_contact_inside {
      width: 50%;
      display: flex;
      margin-bottom: 25px;
      cursor: pointer;
      .userFolloweds_container_contact_inside_img {
        width: 100px;
        height: 100px;
        margin-right: 10px;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userFolloweds_container_contact_inside_right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 10px;
        .mingzi {
          font-size: 18px;
        }
        .mingzi_bottom {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #909399;
          height: 43px;
          .mingzi_bottom_signature {
            font-size: 14px;
            @include white_space;
            width: 200px;
          }
          .mingzi_bottom_flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 180px;
          }
        }
      }
    }
  }
}
</style>
